<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .fl {
               float: left;
           }
           .fr {
               float: right;
           }
           .clear {
               clear: both;
           }
           /* container中只写和这个相关的,不写其他的 */
           .container {
               width: 1000px;
               margin: 0 auto;
           }
           .company .item {
               width: 244px;
               height: 200px;
               margin: 3px;
               background-color: greenyellow;
           }
           .bg-pink {
               background-color: pink;
           }
           .service .item {
               width: 162px;
               height: 250px;
               margin: 2px;
               background-color: skyblue;
           }
           .company .title {
               height: 50px;
               background-color: darkblue;
           }
           .service .title {
               height: 50px;
               margin-top: 20px;
               margin-bottom: 20px;
               background-color: red;
           }
           .bg-orange {
               background-color: orange;
           }
           /* .service {
               padding-top: 20px;
           } */
       </style>
    </head>
    <body>
       <div class="bg-pink company">
           <div class="container">
               <div class="title">标题</div>
               <div class="list">
                  <div class="item fl">1</div>
                  <div class="item fl">2</div>
                  <div class="item fl">3</div>
                  <div class="item fl">4</div>
                  <div class="item fl">5</div>
                  <div class="item fl">6</div>
                  <div class="item fl">7</div>
                  <div class="item fl">8</div>
                  <div class="clear"></div>
               </div>
           </div>
       </div>
       <div class="bg-orange service">
           <div class="container">
               <div class="title">标题</div>
               <div class="list">
                  <div class="item fr">1</div>
                  <div class="item fr">2</div>
                  <div class="item fr">3</div>
                  <div class="item fr">4</div>
                  <div class="item fr">5</div>
                  <div class="item fr">6</div>
                  <div class="clear"></div>
               </div>
           </div>
       </div>
    </body>
</html>

